<template>
	    <view class="smart-panel-head">
	        <view class="smart-panel-head-title">form</view>
	    </view>
		<view class="text">
			<view class="text">form表单</view>
		</view>
		
    <view class="container">
        <form @submit="formSubmit" @reset="formReset">
            <view class="item uni-column">
                <view class="title">switch</view>
                <view>
                    <switch name="switch" />
                </view>
            </view>
            <view class="item uni-column">
                <view class="title">radio</view>
                <radio-group name="radio">
                    <label>
                        <radio value="radio1" /><text>选项一</text>
                    </label>
                    <label>
                        <radio value="radio2" /><text>选项二</text>
                    </label>
                </radio-group>
            </view>
            <view class="item uni-column">
                <view class="title">checkbox</view>
                <checkbox-group name="checkbox">
                    <label>
                        <checkbox value="checkbox1" /><text>选项一</text>
                    </label>
                    <label>
                        <checkbox value="checkbox2" /><text>选项二</text>
                    </label>
                </checkbox-group>
            </view>
            <view class="item uni-column">
                <view class="title">slider</view>
                <slider value="50" name="slider" show-value></slider>
            </view>
            <view class="item uni-column">
                <view class="title">input</view>
                <input class="uni-input" name="input" placeholder="这是一个输入框" />
            </view>
            <view>
                <button form-type="submit">Submit</button>
                <button type="default" form-type="reset">Reset</button>
            </view>
        </form>
    </view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        formSubmit: function(e) {
            console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
            var formdata = e.detail.value
            uni.showModal({
                content: '表单数据内容：' + JSON.stringify(formdata),
                showCancel: false
            });
        },
        formReset: function(e) {
            console.log('清空数据')
        }
    }
}
</script>

<style>
switch {
    transform: scale(0.7);
}
radio {
    transform: scale(0.7);
}
checkbox {
    transform: scale(0.7);
}
button {
}
.container {
    padding: 40rpx;
}
.item .title {
    padding: 20rpx 0;
}
</style>
